<template>
  <div class="navber">
    <span
      v-for="(item,index) in navList"
      :key="item.id"
      :class="activeId == index? 'active':''"
      @click="setActive(index,item.id)">
      {{item.name}}
    </span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeId: 0
    }
  },
  props: ['navList'],
  methods: {
    // 点击改变activeId
    setActive (index, id) {
      this.activeId = index
      // 调用vuex中改变classifyId请求数据
      this.$store.dispatch('getClassifyList', id)
    }
  }
}
</script>

<style lang='less' scoped>
.navber{
  width: 1.62rem;
  height: calc(100vh - 50px - .88rem);
  border-right: 0.005rem solid #ccc;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  span{
    display: block;
    width: 1.62rem;
    text-align: center;
    color: #333;
    font-size: .28rem;
    line-height: .5rem;
    margin-top: .4rem;
  }
  .active{
    border-left: .06rem solid #ab2b2b;
    color: #ab2b2b;
  }
}
</style>
